{% extends "base.html" %}

{% block css %}
    <style>
        /* 按钮悬浮*/
        .float-button {
            position: fixed;
            bottom: 100px;
            right: 100px;
            z-index: 99;
            border: none;
            outline: none;
            background-color: #1dc5a3;
            cursor: pointer;
            padding: 15px;
            border-radius: 10px;
        }

        .btn-primary:hover {
            color: red;
        }
    </style>
{% endblock %}

{% block nav %}
    {% for object in model_list %}
        <li><a href="{{ object.url }}"><i class="{{ object.icon }}"></i>{{ object.model_name }}</a>
        </li>

    {% endfor %}

{% endblock %}

{% block crumbs %}
    <div class="row">
        <div class="col-md-12">
            <ol class="breadcrumb">
                <li class="active">
                    <a class="this-page" href="{% url 'base:interface' %}">接口管理</a>
                </li>
                <li class="active">
                    <a class="this">设置接口mock</a>
                </li>
            </ol>

        </div>
    </div>
{% endblock %}

{% block body %}
    <div class="row">
        <div class="col-md-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h3 class="panel-title" value="{{ if_id }}" id="env_name" style="margin-left: 2%">{{ if_name }}<span
                            style="font-size: 12px;margin-left: 5%">设置模拟接口返回值，不会请求接口，根据模拟值断言</span></h3>
                </div>
                <div class="ibox-content">

                    <div class="form-group">
                        {#                        <button onclick="get_mock()" class="btn btn-primary" style="margin-top: 1%"><i#}
                        {#                                class="fa fa-get-pocket"></i>&nbsp;获取mock#}
                        {#                        </button>#}
                    </div>
                    <div class="form-horizontal" style="margin-top: 1%">
                        <div class="panel">
                            <table name='header' class='table'>
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>参数名</th>
                                    <th>值</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody id="header">
                                <tr>
                                    <td>#</td>
                                    <td contenteditable='true' name='var_name'></td>
                                    <td contenteditable='true' name='var_value'></td>
                                    <td>
                                        <button onclick='add_mock_row()' class='btn btn-primary'><i
                                                class='fa fa-plus-square-o'></i></button>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>

                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-6">
                            <button type="submit" id="submit" class="btn btn-primary float-button"><i
                                    class="fa fa-save"></i>&nbsp;保存
                            </button>
                        </div>
                    </div>

                </div>

            </div>

        </div>
    </div>
    </div>
{% endblock %}

{% block javascript %}
    <script>
        //添加头参数
        function add_mock_row() {
            var newRow = "<tr><td>#</td><td contenteditable='true' name='var_name'></td><td contenteditable='true' name='var_value'></td><td><button onclick='add_mock_row()' class='btn btn-primary'><i class='fa fa-plus-square-o'></i></button> <button class='btn btn-danger' type='button' onclick='del_step(this)'><i class='fa fa-close'></i></button></td></tr>";
            $('tbody').append(newRow);
        }

        //删除行
        function del_step(obj) {
            var tr = obj.parentNode.parentNode;
            var tbody = tr.parentNode;
            tbody.removeChild(tr);
        }

        window.onload = function get_mock() {
            var if_id = $('#env_name').attr('value');
            $.ajax({
                url: "/base/set_mock/",
                type: "get",
                data: {"if_id": if_id, 'make': 1},
                success: function (data) {
                    if (data == '0') {
                        alert('未设置mock！')
                    } else {
                        console.log(data);
                        $('#header').empty();
                        for (i in data) {
                            params = "<tr><td>#</td><td contenteditable='true' name='var_name'>" + i + "</td><td contenteditable='true' name='var_value'>" + data[i] + "</td><td><button onclick='add_mock_row()' class='btn btn-primary'><i class='fa fa-plus-square-o'></i></button> <button class='btn btn-danger' type='button' onclick='del_step(this)'><i class='fa fa-close'></i></button></td></tr>";
                            $('#header').append(params);
                        }

                    }
                }
            })
        }

        $("#submit").click(function () {
            var step = {};
            var if_id = $('#env_name').attr('value');
            $("div[class='panel']").each(function (i) {

                var header_table = $(this).find("table[name='header']");
                var header = {};
                $(header_table).find("tr").each(function (i) {
                    if (i == 0) return true;
                    var name = $(this).find("td[name='var_name']").text();
                    var value = $(this).find("td[name='var_value']").text();
                    if (name == '') {

                    } else {
                        header[name] = value;
                    }
                });

                step["mock"] = header;
            });
            arr = Object.keys(step["mock"]);
            if (JSON.stringify(arr) == '[]') {
                content_json = ''
            } else {
                content_json = JSON.stringify(step);
            }
            $.ajax({
                url: "/base/set_mock/",
                type: "post",
                data: {"content": content_json, "if_id": if_id},
                success: function () {
                    alert('保存成功！');
                    window.location.replace("/base/interface/");

                },
                error: function () {
                    alert("error!");
                }
            });
        });

    </script>

{% endblock javascript %}